<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划统计</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: black;
        }

        body {
            background: black;
        }

    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="schedules.html">回到计划首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 100%" v-model="params.timeRange" placeholder="请选择查询周期" clearable
                   @change="queryCountSchedule">
            <el-option
                    v-for="item in timeRanges"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-input v-model="totalTime" >
            <template slot="prepend">总用时：</template>
        </el-input>
        <template>
            <el-table
                    :cell-style="{'text-align':'center'}"
                    :data="tableData.data"
                    border
                    style="width: 100%">
                <el-table-column
                        align="center"
                        fixed
                        prop="scheduleType"
                        label="计划类型"
                        width="200px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sumTime"
                        width="160px"
                        label="总计划用时">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="finishPercentage"
                        width="160px"
                        label="完成比例">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="percentage"
                        width="160px"
                        label="类型占比">
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            params: {
                username: "",
                timeRange: []
            },
            tableData: {
                total: "",
                data: []
            },
            totalTime: "0",
            timeRanges:[
                {
                    label:"今天",
                    value: []
                },
                {
                    label:"最近一周",
                    value: []
                },
                {
                    label:"最近一月",
                    value:[]
                },
                {
                    label:"最近一季",
                    value:[]
                },
                {
                    label:"最近一年",
                    value:[]
                },
            ]
        },
        methods: {
            dealCookie() {
                // 对cookie操作
                var cookies = document.cookie;
                var cookie_array = cookies.split(";");
                for (var i = 0; i < cookie_array.length; i++) {
                    var cookie = cookie_array[i];
                    var array = cookie.split("=");
                    if (array[0] == "realName") {
                        this.params.realName = array[1];
                    }
                    if (array[0] == " username") {
                        this.params.username = array[1];
                    }
                }
            },
            getTimeRanges(){
                //今天

                //最近一周
                const end = new Date();
                const start = new Date();
                var year = end.getFullYear();
                var day = end.getDate();
                var month = end.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                var endDate = year+"-"+month+"-"+day;
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                year = start.getFullYear();
                day = start.getDate();
                month = start.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                var startDate = year+"-"+month+"-"+day;
                this.timeRanges[1].value = [startDate,endDate];
                //最近一月
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                year = start.getFullYear();
                day = start.getDate();
                month = start.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                startDate = year+"-"+month+"-"+day;
                this.timeRanges[2].value = [startDate,endDate];
                //最近一季
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                year = start.getFullYear();
                day = start.getDate();
                month = start.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                startDate = year+"-"+month+"-"+day;
                this.timeRanges[3].value = [startDate,endDate];
                //最近一年
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                year = start.getFullYear();
                day = start.getDate();
                month = start.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                startDate = year+"-"+month+"-"+day;
                this.timeRanges[4].value = [startDate,endDate];
            },
            queryCountSchedule(){
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/queryCountSchedule', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.tableData.data = response.data;
                    this.totalTime = response.data[0].totalTime;
                });
            },
            toDay(){
                const today = new Date();
                var year = today.getFullYear();
                var day = today.getDate();
                var month = today.getMonth()+1;
                if (month < 10){
                    month = "0"+month;
                }
                if (day < 10){
                    day = "0"+day;
                }
                var date = year+"-"+month+"-"+day;
                this.params.timeRange = [date];
                this.timeRanges[0].value = [date];
            },
        },
        mounted() {
            this.dealCookie();
            this.getTimeRanges();
            this.toDay();
            this.queryCountSchedule();
        }
    });
</script>
</html>